<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理页面</title>
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--<link rel="stylesheet" href="../../../static/plugins/elementui/index.css">-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../../../static/css/orderset.css">
</head>
<body>

<div id="app">
    <el-button type="primary" icon="el-icon-edit" circle @click="openAddRole">角色添加</el-button>
    <template>
        <el-table
                :data="tableData.list"
                style="width: 100%">
            <el-table-column
                    label="角色名称"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="角色关键字"
                    prop="keyword">
            </el-table-column>
            <el-table-column
                    label="角色备注"
                    prop="description">
            </el-table-column>
            <el-table-column
                    align="right"
             width="350">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入姓名查找"
                            @input="showRole(name)"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="openMenu(scope.row)">编辑菜单
                    </el-button>
                    <el-button
                            size="mini"
                            @click="showPermission( scope.row)">编辑权限
                    </el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="tableData.pageNum"
                :page-size="tableData.pageSize"
                :total="tableData.total"
                @current-change="showRole(name,$event)">
        </el-pagination>
        <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>
    </template>

    <!--弹出框-->
    <el-dialog title="角色编辑" :visible.sync="dialogFormVisible">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="角色编辑" name="first">
                    <el-form :model="form">
                        <el-form-item label="角色名称:" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色关键字:" :label-width="formLabelWidth">
                            <el-input v-model="form.keyword" :disabled="true" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色说明:" :label-width="formLabelWidth">
                            <el-input v-model="form.description" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                </el-tab-pane>
                <el-tab-pane label="用户编辑" name="second">
                    <table class="datatable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>用户姓名</th>
                            <th>用户性别</th>
                            <th>用户账号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="c in form.userList">
                            <td>
                                <input :id="c.id" v-model="user_roleKey" name="a" type="checkbox" :value="c.id">
                            </td>
                            <td><label :for="c.id">{{c.username}}</label></td>
                            <td><label :for="c.id">{{c.gender}}</label></td>
                            <td><label :for="c.id">{{c.account}}</label></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false,user_roleKey=[]">取 消</el-button>
            <el-button type="primary" @click="updateRole(form)">确 定</el-button>
        </div>
    </el-dialog>

    <!--角色添加-->
    <el-dialog title="角色添加" :visible.sync="dialogFormVisible2">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="角色添加" name="first">
                    <el-form :model="form2">
                        <el-form-item label="角色名称:" :label-width="formLabelWidth">
                            <el-input v-model="form2.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色关键字:" :label-width="formLabelWidth">
                            <el-input v-model="form2.keyword"  autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色说明:" :label-width="formLabelWidth">
                            <el-input v-model="form2.description" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>

                </el-tab-pane>
                <el-tab-pane label="用户添加到角色" name="second">
                    <table class="datatable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>用户姓名</th>
                            <th>用户性别</th>
                            <th>用户账号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="c in form2.userList">
                            <td>
                                <input :id="c.id" name="a" v-model="userIds" type="checkbox" :value="c.id">
                            </td>
                            <td><label :for="c.id">{{c.username}}</label></td>
                            <td><label :for="c.id">{{c.gender}}</label></td>
                            <td><label :for="c.id">{{c.account}}</label></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false,userIds=[]">取 消</el-button>
            <el-button type="primary" @click="addRole(form2)">确 定</el-button>
        </div>
    </el-dialog>

    <!--菜单编辑-->
    <el-dialog title="菜单编辑" :visible.sync="dialogFormVisible3">
        <el-tree
                :data="menuList"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :default-checked-keys="menu"
                :props="defaultProps">
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false,menu=[]">取 消</el-button>
            <el-button type="primary" @click="updateMenu(roleID)">确 定</el-button>
        </div>
    </el-dialog>

    <!--权限编辑-->
    <el-dialog title="菜单编辑" :visible.sync="dialogFormVisible4">
        <table class="datatable">
            <thead>
            <tr>
                <th>选择</th>
                <th>权限名称</th>
                <th>权限关键字</th>
                <th>权限说明</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="c in permissionList">
                <td>
                    <input :id="c.id" v-model="permissions"  type="checkbox" :value="c.id">
                </td>
                <td><label :for="c.id">{{c.name}}</label></td>
                <td><label :for="c.id">{{c.keyword}}</label></td>
                <td><label :for="c.id">{{c.description}}</label></td>
            </tr>
            </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible4 = false,permissions=[]">取 消</el-button>
            <el-button type="primary" @click="updatePermission(roleID)">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            name: '',
            pageNum: '',
            form: '',
            dialogFormVisible: false,
            formLabelWidth: '120px',
            multipleSelection: [],
            user_roleKey: [],
            dialogFormVisible2:false,
            userIds:[],
            dialogFormVisible3:false,
            menuList:[],
            menu:[],
            roleID:'',
            permissionList:'',
            permissions:'',
            dialogFormVisible4:false
        },
        data() {
            return {
                tableData: [],
                name: '',
                pageNum: '',
                dialogFormVisible: false,
                formLabelWidth: '120px',
                form: {
                    id: '',
                    name:'',
                    keyword: '',
                    description: '',
                    userList: [],
                    list: []
                },
                form2:{
                    name:'',
                  keyword:'',
                    description:'',
                    userList: [],
                    list: []
                },
                activeName: 'first',
                multipleSelection: [],
                user_roleKey: [],
                dialogFormVisible2:false,
                userIds:[],
                dialogFormVisible3:false,
                menuList:[],
                menu:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                roleID:'',
                permissionList:'',
                permissions:'',
                dialogFormVisible4:false
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(row)
                axios.get("/role/showUser").then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限")
                    } else if (data.data.code == '' || data.data.code == null) {
                        this.form.userList = data.data
                        this.dialogFormVisible = true;
                        this.form.name = row.name;
                        this.form.keyword = row.keyword;
                        this.form.description = row.description;
                        this.form.id = row.roleID;
                        this.form.list = row.userList;
                        for (let i = 0; i < this.form.list.length; i++) {
                            this.user_roleKey[i] = this.form.list[i].id
                        }
                    } else {
                        this.open3("显示失败!")
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('该角色可能还包括其他用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/role/deleteRoles.do?id="+row.roleID).then(data =>{
                        if (data.data.code=='-998'){
                            this.open3("你无该权限!")
                        }else if (data.data=='true'||data.data==true){
                            this.open2("删除成功!");
                        }else {
                            this.open3("删除失败!");
                        }
                        this.showRole(this.name,this.pageNum)
                    }).catch(e =>{
                        alert("错误信息为:"+e);
                        this.showRole(this.name,this.pageNum)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }, open2(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'success'
                });
            }, open3(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'error'
                });
            }, showRole(name, pageNum) {
                this.pageNum = pageNum;
                axios.get("/role/showRoles", {
                    params: {
                        'name': this.name,
                        'pageNum': this.pageNum
                    }
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限!");
                    } else if (data.data.code == null || data.data.code == '') {
                        this.tableData = data.data;
                    } else {
                        this.open3("显示失败!");
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, handleSelectionChange(val) {
                this.multipleSelection = val;
            }, updateRole(form) {
                axios.post("/role/updateRoles.do?user_roleKey=" + this.user_roleKey,{
                    'id':form.id,
                    'name':form.name,
                    'keyword':form.keyword,
                    'description':form.description
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限!");
                    } else if (data.data == true || data.data == 'true') {
                        this.open2("修改成功");
                    } else {
                        this.open3("修改失败!")
                    }
                    this.showRole(this.name,this.pageNum)
                    this.dialogFormVisible=false;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });

                this.user_roleKey=[];
            },openAddRole(){
                axios.get("/role/showUser").then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限")
                    } else if (data.data.code == '' || data.data.code == null) {
                        this.form2.userList = data.data
                        this.dialogFormVisible2 = true;
                    } else {
                        this.open3("显示失败!")
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
                this.dialogFormVisible2=true;
            },addRole(form){
                var role={
                    'name':form.name,
                    'keyword':form.keyword,
                    'description':form.description
                }
                axios.post("/role/addRoles",{
                    'list':this.userIds,
                    'role':role
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.open3("你无该权限!")
                    }else if (data.data==true||data.data=='true'){
                        this.open2("新增成功!");
                    }else {
                        this.open3("新增失败!");
                    }
                    this.showRole(this.name,this.pageNum)
                    this.dialogFormVisible2=false;
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            },openMenu(row){
                this.dialogFormVisible3=true;
                this.roleID=row.roleID;
                axios.get("/role/showMenuByRoleID.do?roleID="+row.roleID).then(data =>{
                    if (data.data.code=='-998'){
                        this.open3("你无该权限!")
                    }else if (data.data.code==null || data.data.code==''){
                        console.log(data.data)
                        this.menu=data.data;
                        axios.get("/role/showMenu").then(data =>{
                            if (data.data.code=='-998'){
                                this.open3("你无该权限!");
                            }else if (data.data.code==null||data.data.code==''){
                                this.menuList=data.data;
                            }
                        }).catch(e =>{
                            alert("错误信息为:"+e)
                        });
                    }
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            },updateMenu(roleID){
               var a=Array.from(this.$refs.tree.getCheckedKeys());
                axios.post("/role/updateMenu.do",{
                    'roleID':roleID,
                    'menuIds':a
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.open3("你无该权限")
                    }else if (data.data==true||data.data=='true'){
                        this.open2("修改成功!")
                    }else {
                        this.open3("修改失败!");
                    }
                    this.menu=[];
                    this.dialogFormVisible3=false;
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            },showPermission(row){
                this.roleID=row.roleID;
                axios.get("/role/showPermission").then(data =>{
                    if (data.data.code=="-998"){
                        this.open3("你无该权限")
                    }else if (data.data.code==null||data.data.code==''){
                        this.permissionList=data.data;
                        axios.get("/role/showPermissionByID.do?id="+row.roleID).then(data =>{
                            if (data.data.code=="-998"){
                                this.open3("你无该权限");
                            }else if (data.data.code==null||data.data.code==''){
                                this.permissions=data.data;
                            }else {
                                this.open3("显示失败!")
                            }
                        }).catch(e =>{
                            alert("错误信息为:"+e)
                        });
                    }else {
                        this.open3("显示失败!")
                    }
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
                this.dialogFormVisible4=true;
            },updatePermission(roleID){
                axios.post("/role/updatePermission",{
                    'roleID':roleID,
                    'permissionIds':this.permissions
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.open3("你无该权限!")
                    }else if (data.data){
                        this.open2("修改成功!")
                    }else {
                        this.open3("修改失败!");
                    }
                    this.permissions=[];
                    this.dialogFormVisible4=false;
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            }
        }, created() {
            this.showRole();
        }
    });
</script>
</html>